<template>
	<view class="animal_search">
		<view class="animal_search_header">
			<view class="search_header_back">
				<image @click="backGo" src="/static/back.png" mode=""></image>
			</view>
			<view class="search_btn">
				<u-search @search="search" @custom="search" placeholder="请输入你要查询的内容" v-model="keyword"></u-search>
			</view>

		</view>
		<view class="animal_search_main">
			<view class="old_title"><text>搜索历史</text>
				<text v-if="oldSelList.length==0" @click="empty"></text>
				<text v-if="oldSelList.length!=0" class="emptyt" @click="empty">清空记录</text>
			</view>
			<view class="old_search">
				<view class="empty" v-if="oldSelList.length==0">
					暂无搜索历史
				</view>
				<text v-if="oldSelList.length!=0" class="old_item" v-for="(item,index) in oldSelList" :key="item"
					@click="search2(item)">
					{{item}}
				</text>
			</view>
			<view class="hot_title">热门搜索</view>
			<view class="hot_search">
				<text class="hot_item" @click="jumpGo(item.id,item.pet_name)" v-for="(item,index) in hotSelList">
					{{item.pet_name}}
				</text>
			</view>

		</view>
		<u-popup :show="show" mode="center" :round="10" @close="close">
			<view class="show_box" v-if="selList.length!=0">
				<view class="search_item" v-for="item in selList" @click="jumpGo2(item.id)" :key="item.id">
					{{item.pet_name}}
				</view>

			</view>
			<view class="show_box" v-if="selList.length==0">
				<view class="search_empty">
					亲,找不到你想要的...
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		selHotList,
		getList
	} from "../../api/index.js"
	export default {
		data() {
			return {
				keyword: '',
				hotSelList: [],
				oldSelList: [],
				show: false,
				selList: []

			};
		},
		onShow() {
			this.getHotSel()
			if (uni.getStorageSync("oldSelList")) {
				this.oldSelList = JSON.parse(uni.getStorageSync("oldSelList"))
				console.log(123)
			}
		},
		methods: {
			empty() {
				this.oldSelList = []
				if (uni.getStorageSync("oldSelList")) {
					uni.removeStorageSync("oldSelList")
				}
			},
			close() {
				this.show = false
				// console.log('close');
			},
			backGo() {
				uni.navigateBack({
					delta: 1
				})
			},
			async getList(pet_name) {
				await getList(pet_name).then((data) => {
					let {
						data: {
							rows
						}
					} = data
					this.selList = rows
					console.log(data)
				})
			},
			async getHotSel() {
				await selHotList().then((data) => {
					let {
						data: {
							rows
						}
					} = data
					this.hotSelList = rows
				})
			},
			search() {
				let newVal = this.keyword
				if (newVal != "") {
					this.show = true
					this.getList(newVal)
					if (!uni.getStorageSync("oldSelList")) {
						this.oldSelList.unshift(newVal)

						uni.setStorageSync("oldSelList", JSON.stringify(this.oldSelList))
					} else {
						let oldVal = JSON.parse(uni.getStorageSync("oldSelList"))
						let cFlat = oldVal.findIndex((item) => {
							return item == newVal
						})
						if (cFlat == -1) {
							oldVal.unshift(newVal);
							this.oldSelList.unshift(newVal)
							uni.setStorageSync("oldSelList", JSON.stringify(oldVal))
						}

					}
					this.keyword = ""
				}


			},
			search2(pet_name) {
				this.getList(pet_name)
				this.show = true
			},
			jumpGo(id, pet_name) {
				uni.setStorageSync("id", id)
				let newVal = pet_name
				console.log(newVal)
				if (!uni.getStorageSync("oldSelList")) {
					this.oldSelList.unshift(newVal)

					uni.setStorageSync("oldSelList", JSON.stringify(this.oldSelList))
				} else {
					let oldVal = JSON.parse(uni.getStorageSync("oldSelList"))
					let cFlat = oldVal.findIndex((item) => {
						return item == newVal
					})
					if (cFlat == -1) {
						oldVal.unshift(newVal);
						this.oldSelList.unshift(newVal)
						uni.setStorageSync("oldSelList", JSON.stringify(oldVal))
					}

				}

				uni.navigateTo({
					url: `/pages/detail/detail`
				})
			},
			jumpGo2(id) {
				console.log(id)
				uni.setStorageSync("id", id)
				uni.navigateTo({
					url: `/pages/detail/detail`
				})
			}
		}
	}
</script>

<style lang="scss">
	.search_empty {
		line-height: 134px;
		margin: 0 auto;
		width: 100%;
		text-align: center;
		font-size: 22px;
		font-weight: 100;
	}

	.show_box {
		background-color: white;
		width: 300px;
		border-radius: 10px;
		padding-bottom: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.search_item {
			padding: 10px 6px 7px;
			width: 80%;
			margin: 0 auto;
			border-bottom: 1rpx solid #4f5739;
			box-sizing: border-box;
			text-align: center;

			&:first-child {
				margin-top: 10px;
			}

		}
	}

	.empty {
		width: 100%;
		text-align: center;
	}

	.emptyt {
		margin-top: 2px;
		font-size: 14px;
	}

	.animal_search {
		color: #333;
	}

	.search_btn {
		padding-top: 10px;
		margin: 0 20px 0 46px;

	}

	.animal_search_main {
		margin: 20px 20px 0;

		.old_title {
			display: flex;
			justify-content: space-between;
		}

		.hot_title,
		.old_title {
			margin-bottom: 16px;
			font-size: 16px;
			color: #4f5739;
		}

		.hot_search,
		.old_search {
			margin-bottom: 30px;
			font-size: 14px;
			display: flex;
			flex-wrap: wrap;

			.hot_item,
			.old_item {
				font-weight: 100;
				padding: 4px 10px;
				background-color: #a1b275;
				border-radius: 10px;
				color: white;
				margin-right: 10px;
				margin-bottom: 10px
			}
		}
	}

	.animal_search_header {
		position: relative;

		.search_header_back {
			position: fixed;
			top: 10px;
			left: 10px;
			z-index: 1;

			image {

				width: 30px;
				height: 30px;
			}
		}


	}
</style>